<!--
 * @Author: @yzcheng
 * @Date: 2021-04-22 15:49:31
 * @Version: 1.0
 * @LastEditors: @yzcheng
 * @Description: 路线详情
 * @LastEditTime: 2021-04-23 10:28:46
-->
<template>
  <el-dialog custom-class="line_details_dialog" title="路线详情" :model-value="Visible" width="80%">
    <DataDetails :basicMessageGroups="basicMessageGroups"></DataDetails>
    <div :class="`transition-box  ${transition_flow_chart}`">
      <span @click="flowChartViewer" :class="`flow_chart_viewer`">审批历史详情</span>
      <FlowChart />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="small" type="primary" @click="aa">返 回</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { Model, Prop, Options, Vue } from 'vue-property-decorator'
import DataDetails from '@/components/DataDetails/index.vue'
import FlowChart from '@/components/DataDetails/components/flowChart.vue'

@Options({
  components: {
    DataDetails,
    FlowChart,
  },
})
export default class lineDetails extends Vue {
  @Model('visible', { type: Boolean, default: false }) Visible!: boolean
  @Prop() basicMessageGroups: any
  transition_flow_chart = ''
  flowChartViewer() {
    if (!this.transition_flow_chart) {
      this.transition_flow_chart = 'transition_flow_chart_in'
    } else {
      this.transition_flow_chart = ''
    }
  }
}
</script>
<style lang="scss">
.line_details_dialog {
  overflow: hidden;
}
.line_details_dialog .el-dialog__body {
  position: relative;
}
</style>
<style lang="scss" scoped>
.transition-box {
  z-index: 9999;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(100%);
  background: #fff;
  transition: all 1s;
}
.flow_chart_viewer {
  height: auto;
  color: #fff;
  text-align: center;
  display: block;
  position: relative;
  left: -45px;
  width: 35px;
  font-size: 18px;
  word-wrap: break-word;
  background: rgba(103, 194, 58, 0.8);
  padding: 10px 5px;
  border-radius: 5px;
  cursor: pointer;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.5s;
}
.flow_chart_viewer:hover {
  background: rgba(103, 194, 58, 1);
}
.transition_flow_chart_in {
  transform: translateX(0);
  & > span {
    transform: translate(100%, -50%);
  }
}
</style>
